我們平常瀏覽的網頁，
都是由 HTML+CSS+JS 所構成。

HTML 就像主廚料理過的食物，
只要你一點好菜，
就會送到你的瀏覽器裡供你享用。

CSS 就像是食物的擺盤，
即使是相同的食物，
擺盤不同吃起來就是不一樣。

JS 則像你身邊的服務生，
在你的用餐過程中隨侍在側，
為你提供各種用餐服務。

大部分的情況下，
HTML+CSS+JS 都是由網站提供，
就像到餐廳用餐一樣，
不管是食物、擺盤、服務生，
全都是由餐廳來提供。

不過，我們在收到頁面之後，
其實也可以運用自己的料理能力，
執行自己的 CSS 和 JS 程式碼，
甚至操縱、修改 HTML，
以獲得更好的網頁瀏覽體驗。

我們都知道，
大部分人並不寫網頁、不架網站。
大部分人只會看網頁、瀏覽網站。

對於大部分沒在寫網頁的人來說，
學習 HTML+CSS+JS 究竟有何用呢？

反過來說，
學習這些東西，真的就這麼沒用嗎？

非也，非也。
其實你不必成為一個網頁設計師，
也能善用這些強大的技能。
畢竟學任何語言都一樣，
常用才會熟。
要是你不常寫網頁、做網站，
好像就沒什麼機會寫 JS 程式碼，
這樣你跟它怎麼會熟呢？

其實你根本不用寫網頁，
直接拿別人寫好的網頁來動手就好，
想要做什麼就用 JS 來做，
這樣至少比較常有機會，
可以熟練你的 JS 技能。

在當今這個資訊社會中，
會寫 HTML+CSS+JS，
簡直就像是一種料理的能力。
就像大部分人雖然不在餐廳工作，
多少還是要有一些料理食物的能力。

我們每個人家裡都有廚房，
實際上也不會每餐都吃外食。
逛網站、看網頁的時候，
我們如果想一展身手，
網頁背後的「廚房」又在哪裡呢？

其實只要滑鼠右鍵選【檢查】、
或是鍵盤按下【F12】
就來到網頁背後的「廚房」了。

在這裡，你可以
直接修改或定義新的 CSS 設定，
甚至可以直接修改 HTML。
而在下面的 console 控制台，
你也可以利用 JS 程式碼，
操縱或定義一些網頁的行為。

舉個例子好了。
我自己買東西之前，經常會先到
「比價撿便宜」這個網站去比價。
這個網站會把大量的價格資訊，
拆分成許多的頁面來呈現。

由於資料數量通常很多，
每次要切換到下一頁查看，
就必須滑動到頁面最下方，
去點擊【下一頁】的按鈕。

這個按鈕有時並不在相同的位置，
所以經常要移動滑鼠游標，
對準之後再去點擊。

這雖然只是個小小的動作，
但由於懶惰永遠是進步的動力哦不，
其實是因為手腕經常做這些小移動，
很容易就會有腕隧道症候群， T_T
所以，
我希望改用鍵盤的左右方向鍵，
來進行換頁的操作。

這種事，交給 JS 來做就對了。
程式碼如下：

document.onkeydown = function(e) {  // 偵測鍵盤按下的事件
	if (e.key=='ArrowRight') { // 如果按下的是向右方向鍵
		next_button = $("ul.pagination li a:contains('下一頁')")[0];
        if (next_button) {
            next_button.click();
        }
	}
	else if (e.key=='ArrowLeft') { // 如果按下的是向左方向鍵
		prev_button = $("ul.pagination li a:contains('上一頁')")[0];
        if (prev_button) {
            prev_button.click();
        }
	}
};

只要把這些程式碼，輸入到 Console 裡頭，
回到頁面中按下左右方向鍵，
就可以快速優雅地切換頁面了。

問題是，這段程式碼只能執行一次。

因為切換了頁面之後，
整個頁面會重新載入，
所以剛才輸入的程式碼，全都失效了。
如果想再次擁有同樣的功能，
對不起，就要重新輸入 JS 程式碼才行。

這這這未免也太蠢了吧。

我相信沒有人會這樣做。
不過，我們還是可以利用
一個叫做 Styler 的外掛，
來解決這個問題。

安裝好這個外掛之後，
就可以針對各個網站或頁面，
直接寫入 CSS 和 JSS 的程式碼，
對 HTML 進行各式各樣的操作。
下次回到同樣的網站或頁面，
也會自動載入這些程式碼。

所以，你只要寫一次程式碼，
將來就可以持續受用了。

比方說，安裝好這個外掛之後，
我們可以先打開「比價撿便宜」網站，
然後點擊 Styler 的圖標，
接著在出現的視窗中，
輸入我們剛才的程式碼，
按下 SAVED DATA 保存之後，
就可以按下 RUN 執行程式碼了。

這時您再試試看，
左右方向鍵應該就可以
順利切換到上一頁、下一頁，
不會再因為頁面重新載入而失效了。

而且以後再回到這個網站搜尋資料，
程式碼就會自動載入，
左右方向鍵就可以直接切換頁面了。

有了 Styler 之後，
我們就可以針對不同的網頁，
撰寫不同的 JS 或 CSS 程式碼，
把網頁進一步料理成
我們更喜歡的樣子，
以滿足我們個人的需求。

比方說，
我們可以在寶可夢地圖中，
寫一個 JS 程式碼偵測特定的寶可夢，
只要一出現重要的寶可夢，
就用語音功能叫出聲音來，
這樣即使我們不在電腦旁邊，
或是正在做其他事情，
也不會漏掉這個訊息，
可以趕緊準備去抓怪了。 ^_^
（如果用這個方式
　來盯股票的價格呢？）

Styler 的做法，其實已經很好用了。
但這個方法實在太厲害，
你可以這樣寫 JS，駭客當然也可以，
因此瀏覽器對於 Styler 這類的外掛，
限制只會越來越嚴格。
也許將來有一天就無法這樣使用了。

既然如此，我們是否應該就此放棄
自己料理網頁的能力呢？
那倒也不必。
我們只要學會如何做外掛就好了呀。

明天我們就來看看，
如何建立自己的外掛，
料理出天下無敵的絕佳美食。

肚子好餓，我要先去享用美食了喲 ^_^